<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>弹窗</title>
		<meta name="description" content="Common UI Features &amp; Elements" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="assets/css/jquery.gritter.css" />
		<link rel="stylesheet" href="assets/css/ace.min.css" />

		<script src="assets/js/jquery-3.2.1.min.js"></script>
		<script src="assets/js/jquery.gritter.min.js"></script>
		<script src="assets/js/ace.min.js"></script>

		<style type="text/css">
			.gritter-bottom-right {
				position: fixed;
				bottom: 0%;
				right: 1%;
				width: 200px;
				height: 100px;
			}
		</style>
	</head>

	<body class="no-skin">
		<div class="col-sm-6">
			<h3 class="row header smaller lighter orange">
				<span class="col-sm-8">
					<i class="ace-icon fa fa-bell"></i>
					Gritter Notifications
				</span><!-- /.col -->
				<span class="col-sm-4">
					<label class="pull-right inline">
						<small class="muted">Dark:</small>

						<input id="gritter-light" checked="" type="checkbox" class="ace ace-switch ace-switch-5" />
						<span class="lbl middle"></span>
					</label>
				</span><!-- /.col -->
			</h3>
			<p>
				<i>Click to see</i>
			</p>
			<p>
				<button class="btn" id="gritter-regular">Regular</button>
				<button class="btn btn-info" id="gritter-sticky">Sticky</button>
				<button class="btn btn-success" id="gritter-without-image">Without Image</button>
			</p>
			<p>
				<button class="btn btn-danger" id="gritter-error">Error</button>
				<button class="btn btn-warning" id="gritter-max3">Max 3</button>
				<button class="btn btn-primary" id="gritter-center">Center</button>
				<button class="btn btn-inverse" id="gritter-remove">Remove</button>
			</p>
			<p>
				<button class="btn btn-primary" id="btn_save">保存</button>
			</p>
		</div>
	</body>

	<script type="text/javascript">
		$(function() {
			$('#gritter-regular').on(ace.click_event, function() {
				$.gritter.add({
					title: 'This is a regular notice!',
					text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" class="blue">magnis dis parturient</a> montes, nascetur ridiculus mus.',
					sticky: false,
					time: '',
					class_name: (!$('#gritter-light').get(0).checked ? 'gritter-light' : '')
				});

				return false;
			});

			$('#gritter-sticky').on(ace.click_event, function() {
				var unique_id = $.gritter.add({
					title: 'This is a sticky notice!',
					text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" class="red">magnis dis parturient</a> montes, nascetur ridiculus mus.',
					sticky: true,
					time: '',
					class_name: 'gritter-info' + (!$('#gritter-light').get(0).checked ? ' gritter-light' : '')
				});
				return false;
			});

			$('#gritter-without-image').on(ace.click_event, function() {
				$.gritter.add({
					title: 'This is a notice without an image!',
					text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" class="orange">magnis dis parturient</a> montes, nascetur ridiculus mus.',
					class_name: 'gritter-success' + (!$('#gritter-light').get(0).checked ? ' gritter-light' : '')
				});
				return false;
			});

			$('#gritter-max3').on(ace.click_event, function() {
				$.gritter.add({
					title: 'This is a notice with a max of 3 on screen at one time!',
					text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" class="green">magnis dis parturient</a> montes, nascetur ridiculus mus.',
					sticky: false,
					before_open: function() {
						if($('.gritter-item-wrapper').length >= 3) {
							return false;
						}
					},
					class_name: 'gritter-warning' + (!$('#gritter-light').get(0).checked ? ' gritter-light' : '')
				});
				return false;
			});

			$('#gritter-center').on(ace.click_event, function() {
				$.gritter.add({
					title: 'This is a centered notification',
					text: 'Just add a "gritter-center" class_name to your $.gritter.add or globally to $.gritter.options.class_name',
					class_name: 'gritter-info gritter-center' + (!$('#gritter-light').get(0).checked ? ' gritter-light' : '')
				});
				return false;
			});

			$('#gritter-error').on(ace.click_event, function() {
				$.gritter.add({
					title: 'This is a warning notification',
					text: 'Just add a "gritter-light" class_name to your $.gritter.add or globally to $.gritter.options.class_name',
					class_name: 'gritter-error' + (!$('#gritter-light').get(0).checked ? ' gritter-light' : '')
				});
				return false;
			});

			$("#gritter-remove").on(ace.click_event, function() {
				$.gritter.removeAll();
				return false;
			});

			function savePromptDialog(titleText, contentText) {
				$.gritter.add({
					title: titleText,
					text: contentText,
					time: 2000,
					class_name: 'gritter-info gritter-bottom-right'
				});
			}

			savePromptDialog('保存', '保存成功 !');
			$("#btn_save").click(savePromptDialog("保存", "保存成功 !"));
		});
	</script>

</html>